<template>
  <div>
    <el-card>
      <el-form
        class="form"
        ref="form"
        :rules="rules"
        :model="form"
        :inline="false"
        label-width="120px"
      >
        <el-form-item label="账号:">
          <el-input
            v-model="form.username"
            placeholder="请输入账号"
            class="input1Style"
            maxlength="20"
          />
        </el-form-item>
        <el-form-item label="员工姓名:">
          <el-input
            v-model="form.name"
            placeholder="请输入员工姓名"
            class="input1Style"
            maxlength="20"
          />
        </el-form-item>
        <el-form-item label="手机号:">
          <el-input
            v-model="form.phone"
            placeholder="请输入手机号"
            class="input1Style"
            maxlength="20"
          />
        </el-form-item>
        <el-form-item label="性别:" prop="sex">
          <el-radio-group v-model="form.sex">
            <el-radio label="男" value="1" />
            <el-radio label="女" value="2" />
          </el-radio-group>
        </el-form-item>
        <el-form-item label="身份证号:" prop="identity">
          <el-input
            v-model="form.idNumber"
            class="input1Style"
            placeholder="请输入身份证号"
          />
        </el-form-item>
        <el-form-item>
          <el-button 
            @click="onCancel"
          >Cancel</el-button>
          <el-button 
            @click="submitForm(true)"
          >Save</el-button>
          <el-button
            v-if="this.action === 'ADD'"
            type="primary"
            @click="submitForm"
            >Save&&Submit</el-button
          >
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
<script>
import { queryEmployeeById, editEmployee, addEmployee } from "@/api/employee";
export default {
  data() {
    return {
      action: '',
      id: '',
      form: {
        username: '',
        name: '',
        phone: '',
        idNumber: '',
        sex: "1",
      },
      rules: {
        name: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (value === "") {
                callback(new Error("员工姓名必须填写"));
              }
              callback();
            },
            trigger: "blur",
          }
        ],
        username: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (value === "") {
                callback(new Error("账号必须填写"));
              }
              callback();
            },
            trigger: "blur"
          }
        ],
        phone: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (value === "") {
                callback(new Error("手机号必须填写"));
              }
              callback();
            },
            trigger: "blur"
          }
        ],
        idNumber: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (value === "") {
                callback(new Error("身份证号必须填写"));
              }
              callback();
            }, trigger: 'blur'
          }
        ]
      }
    }
  },
  created() {
    const {
      query: { action, id },
    } = this.$route;
    this.action = action;
    this.id = id;
    if (this.action === "EDIT" && id) {
      this.fechData();
    }
  },
  methods: {
    async fechData() {
      queryEmployeeById(this.id).then((res) => {
        this.form = res.data;
      });
    },
    onCancel() {
      this.$router.go(-1);
    },
    submitForm(e, jump = false) {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          if (this.action === "EDIT" && this.id) {
            await editEmployee(this.form);
            this.$message.success("编辑成功");
          } else {
            await addEmployee(this.form);
            this.$message.success("新增成功");
          }
          if (jump) {
            this.$router.push("/employee");
          } else {
            this.$refs.form.resetFields();
            this.form = {
              username: "",
              name: "",
              phone: "",
              idNumber: "",
              sex: "",
            };
          }
        } else {
          return false;
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>

  .form {
    width: 650px;
    margin: 0 auto;
  }
</style>
